<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="ss" @keydown.enter="enterfn" />
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <!-- tbody部分 -->
      <BiaoGe :list="list" @clickXQ="clickXQ"></BiaoGe>
      <!-- 详情部分 -->
      <XiangQin :list="list" v-show="isshow" @closefn="closefn"></XiangQin>
    </table>
  </div>
</template>
<script>
import XiangQin from "./components/XiangQin.vue";
import BiaoGe from "./components/BiaoGe.vue";

export default {
  name: "App",
  components: {
    XiangQin,
    BiaoGe,
  },

  data() {
    return {
      isshow: false,
      ss: "",
      list: [
        {
          id: 1,
          date: "2022-02-02",
          name: "张三",
          result: "感冒",
          drug: "感冒药",
        },
        {
          id: 2,
          date: "2022-02-01",
          name: "李四",
          result: "头疼",
          drug: "止痛药",
        },
        {
          id: 3,
          date: "2022-02-03",
          name: "王五",
          result: "发烧",
          drug: "退烧药",
        },
      ],
    };
  },

  mounted() {},

  methods: {
    enterfn() {
      this.list = this.list.filter((item) => {
        if (item.name == this.ss) {
          return item;
        }
      });
      this.ss = "";
    },
    clickXQ(id) {
      this.isshow = true;
     this.list= this.list.filter((item) => {
        if (item.id == id) {
          return item;
        }
      });
    },
    closefn() {
      this.isshow = false;
    },
  },
};
</script>
<style scoped>
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.my-table td,
.my-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>
